<template>
  <view class="buy">
    <view class="title">
      <text class="text">余额：</text>
      <text class="num">{{ balance }}</text>
    </view>
    <view class="number">
      <view class="list">
        <view :class="num == index ? 'item real' : 'item'" v-for="(item, index) in list" :key="index" @click="pick(index)">
          <view class="card" v-if="index < 8">
            <text class="top">{{ item.money }}元</text>
          </view>
          <view class="card" v-if="index === 8">
            <text class="top">其他</text>
          </view>
          <view v-if="index === 3" class="recommend">
            <text>推荐</text>
          </view>
        </view>
      </view>
      <div class="input-box" v-if="num === 8">
        <u-input type="number" placeholder="请输入自定义金额" v-model="amount"></u-input>
      </div>
      <div style="padding: 0 36rpx;width: 100%">
        <view class="sure" @click="confirm">
          <text>确定充值</text>
        </view>
      </div>
    </view>
    <view class="tip">
      <text class="titl">温馨提示</text>
      <view>
        <text>预存即代表已阅读并同意</text>
        <text>《预存管理协议》</text>
      </view>
    </view>
  </view>
</template>

<script>

function createOrderNumber() {
  // 获取当前日期和时间
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1; // getMonth() 是从0开始的，所以需要+1
  let day = date.getDate();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  // 格式化日期和时间
  month = month < 10 ? '0' + month : month; // 如果月份小于10，前面添加一个0
  day = day < 10 ? '0' + day : day; // 如果日期小于10，前面添加一个0
  hours = hours < 10 ? '0' + hours : hours; // 如果小时小于10，前面添加一个0
  minutes = minutes < 10 ? '0' + minutes : minutes; // 如果分钟小于10，前面添加一个0
  seconds = seconds < 10 ? '0' + seconds : seconds; // 如果秒数小于10，前面添加一个0

  // 创建订单号
  return year + '' + month + '' + day + '' + hours + '' + minutes + '' + seconds;
}
export default {
  data() {
    return {
      num: 0,
      list: [
        {
          number: '4',
          money: '100',
        },
        {
          number: '13',
          money: '200',
        },
        {
          number: '21',
          money: '500',
        },
        {
          number: '48',
          money: '1000',
        },
        {
          number: '76',
          money: '2000',
        },
        {
          number: '146',
          money: '3000',
        },
        {
          number: '216',
          money: '4000',
        },
        {
          number: '363',
          money: '5000',
        },
        {
          number: '363',
          money: '其他',
        },
      ],
      amount: '',
      balance: '0.00'
    };
  },
  onLoad() {
    if (!this.$store.state.userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
      });
      return;
    }
    this.$api.memberDetail(this.$store.state.userInfo.id).then((res) => {
      this.balance = res.balance || '0.00';
    });
  },
  methods: {
    pick(index) {
      this.num = index;
    },
    confirm() {
      if (!this.$store.state.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none',
        });
        return;
      }
      if (this.num === 8) {
        if (!this.amount) {
          uni.showToast({
            title: '请输入自定义金额',
            icon: 'none',
          });
          return;
        }
      }
      let amount = this.num === 8 ? this.amount : this.list[this.num].money;
      // 充值金额
      if (amount > 5000) {
        uni.showToast({
          title: '最大充值金额为5000元',
          icon: 'none',
        });
        return;
      }
      this.$api.rechargeCreate({
        amount,
        member_id: this.$store.state.userInfo.id,
        member_name: this.$store.state.userInfo.nickname,
        order_no: createOrderNumber(),
        status: 0
      }).then((res) => {
        this.balance = (parseFloat(this.balance) + parseFloat(amount)).toFixed(2);
        uni.showToast({
          title: '充值成功',
          icon: 'success',
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.buy {
  width: 100%;
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 42rpx 0 20rpx 50rpx;
    background-color: #ffffff;
    > image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }
    > text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 40rpx;
    }
    .num {
      color: #ff4141;
    }
  }
  .input-box {
    width: 100%;
    padding: 0 36rpx;
    padding-bottom: 50rpx;
    .u-input {
      border: 1px solid #f1f1f1;
      border-radius: 8rpx;
      padding:0 20rpx !important;
    }
  }
  .number {
    width: 100%;
    background-color: #ffffff;
    margin-top: 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50rpx;
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 38rpx 40rpx 0 40rpx;
      .item {
        width: 194rpx;
        height: 194rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx;
        margin-bottom: 44rpx;
        display: flex;
        border: 2rpx solid #ffffff;
        .card {
          width: 194rpx;
          height: 194rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .top {
            display: flex;
            align-items: center;
            > text {
              font-size: 32rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #666666;
              line-height: 44rpx;
              margin-right: 12rpx;
            }
            > image {
              width: 30rpx;
              height: 30rpx;
            }
          }
          .money {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 34rpx;
            margin-top: 12rpx;
          }
        }
        .recommend {
          width: 112rpx;
          background: rgb(241, 89, 41);
          border-radius: 8rpx 0rpx 8rpx 0rpx;
          position: absolute;
          text-align: center;
          margin-top: -18rpx;
          > text {
            font-size: 20rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 42rpx;
          }
        }
      }
      .real {
        border: 2rpx solid rgb(241, 89, 41);
      }
      &:after {
        content: '';
        width: 194rpx;
      }
    }
    .sure {
      width: 100%;
      height: 80rpx;
      background: rgb(241, 89, 41);
      border-radius: 40rpx;
      text-align: center;
      > text {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 80rpx;
      }
    }
  }
  .tip {
    height: 394rpx;
    background: #ffffff;
    margin-top: 18rpx;
    padding: 40rpx;
    .titl {
      font-size: 28rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #666666;
      line-height: 40rpx;
      margin-bottom: 6rpx;
    }
    > view {
      > text {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        line-height: 32rpx;
      }
      &:nth-child(2) {
        > text:nth-child(2) {
          color: #333333;
        }
      }
      &:nth-child(5) {
        > text:nth-child(2) {
          color: #ff6a5f;
          font-weight: 600;
          border-bottom: 2rpx solid #ff6a5f;
        }
      }
    }
  }
}
</style>
